<%@ page language="java" %> 
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="./css/stylesheet.css" rel="stylesheet" type="text/css" />
<title>Calculadora</title>
<script language="javascript">
function setValue(value) {

	if(document.getElementById("display").innerHTML!="0"  || document.getElementById("display").innerHTML==null)
		document.getElementById("display").innerHTML=document.getElementById("display").innerHTML+value;
	else
		document.getElementById("display").innerHTML = value;
}


function setOperation(operation) {
	document.getElementById("value1").value = document.getElementById("display").innerHTML;
	document.getElementById("display").innerHTML="0";
	document.getElementById("operation").value = operation;
	
}

function clearCalc() {
	document.getElementById("display").innerHTML="0";
}

function submitForm()
{

	document.getElementById("value2").value = document.getElementById("display").innerHTML;
	
	//Verifica que se haya especificado el segundo operando
	if(document.getElementById("value2").value=="")
	{	
		alert("Por favor, especifique el segundo operando");
		return;
	}
	
	//Verifica que se haya especificado el primer operando	
	if(document.getElementById("operation").value=="")
	{	
		alert("Por favor, especifique la operacion a realizar");
		return;
	}
	
	document.getElementById("calc").action = "./Calcular" + document.getElementById("operation").value;
	document.getElementById("calc").method ="POST";
	document.getElementById("calc").submit();
}

</script>   
</head>
<body>
	<div id="top">
		<h1>Calculadora</h1>
	</div>
	<form id="calc" method="POST">
		<input type="hidden" name="value1" id="value1" value=""/>
		<input type="hidden" name="value2" id="value2" value=""/>
		<input type="hidden" name="value2" id="operation" value=""/>
		<input type="hidden" name="result" id="result" value="0"/>
		<div id="container">
			<table id="main">
				<tr>
					<td colspan="4">
						<p id="display" class="display"><%= (request.getParameter("result")==null ? "0" : request.getParameter("result"))%></p>
					</td>				
				</tr>
				<tr>
					<td>
						<input type="button" class="button" id="number1" onclick="javascript:setValue(this.value)" value="1">
					</td>
					<td>
						<input type="button" class="button" id="number2" onclick="javascript:setValue(this.value)"   value="2">
					</td>
					<td>
						<input type="button" class="button" id="number3"  onclick="javascript:setValue(this.value)"  value="3">
					</td>
					<td>
						<input type="button" class="button" id="plus" onclick="javascript:setOperation('Suma')"  value="+">
					</td>				
				</tr>
				<tr>
					<td>
						<input type="button" class="button" id="number4" onclick="javascript:setValue(this.value)"  value="4">
					</td>
					<td>
						<input type="button" class="button" id="number5" onclick="javascript:setValue(this.value)"  value="5">
					</td>
					<td>
						<input type="button" class="button" id="number6" onclick="javascript:setValue(this.value)"  value="6">
					</td>
					<td>
						<input type="button" class="button" id="minus"	onclick="javascript:setOperation('Resta')" value="-">
					</td>				
				</tr>
				<tr>
					<td>
						<input type="button" class="button" id="number7" onclick="javascript:setValue(this.value)"  value="7">
					</td>
					<td>
						<input type="button" class="button" id="number8" onclick="javascript:setValue(this.value)"  value="8">
					</td>
					<td>
						<input type="button" class="button" id="number9" onclick="javascript:setValue(this.value)"  value="9">
					</td>
					<td>
						<input type="button" class="button" id="mult" onclick="javascript:setOperation('Multiplicacion')" value="x">
					</td>				
				</tr>			
				<tr>
					<td>
						<input type="button" class="button" id="number4" value="0" onclick="javascript:setValue(this.value)">
					</td>
					<td>
						<input type="button" style="width: 100%" class="button" id="equals" onclick="javascript:submitForm()"  value="=">
					</td>
					<td>
						<input type="button" class="button" id="clear" onclick="javascript:clearCalc()"  value="C">
					</td>
					<td>
						<input type="button" class="button" id="division" onclick="javascript:setOperation('Division')" value="%">
					</td>				
				</tr>
			</table>
			</div>
		</form>
</body>
</html>